<docs>
  ## 单选
</docs>
<template>
  <div class="weui-cell treeSelect">
    <div class="weui-cell__hd">
      <p class="weui-label">{{label}}</p>
    </div>
    <div class="weui-cell__ft text " @click="show = true">{{activeName }}</div>
    <van-popup v-model="show" position="bottom">
      <van-tree-select
        @click.stop
        @click-item="checkData"
        :items="list"
        :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'tree-odd',
  props: {
    label: String,
    items: Array
  },
  data() {
    return {
      activeIndex: 0,
      activeIds: '',
      list: [{
          // 导航名称
          text: '',
          children: [],
        }],
      show: false,
      activeName:''
    };
  },
  mounted(){
    this.list[0].text = this.label;
    this.$nextTick(_=>{
      if(this.items.length > 0){
        this.list[0].children = this.items;
      }
    })
  },
  methods: {
    checkData(data){
      this.activeIds.includes(data.id)? this.activeIds.splice(this.activeIds.indexOf(data.id), 1) :this.activeIds.push(data.id);
      var arr = [];
      this.items.forEach((item)=>{
        this.activeIds.includes(item.id) ? arr.push(item.text) :''
      })
      this.activeName = arr.join(',');
      this.$emit('input', this.activeIds);
    }
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}
.text {
  text-align: left;
  flex: 1 1 auto;
  height: auto;
  line-height: 45px;
  color: #000;
  overflow: hidden;
  @include input-text;
}
.treeSelect /deep/ .van-tree-select{
  // .van-sidebar-item,
  .van-tree-select__item,
  .van-tree-select__selected{
    font-size: 30px;
  }
  .van-tree-select__content{
    padding: 10px 0;
    .van-tree-select__item{
      margin: 10px 0;
    }
  }
}
.treeSelect /deep/ .van-tree-select{
  .van-sidebar-item{
    .van-sidebar-item__text{
     height:48px;
     line-height: 48px;
     width:100%;
     font-size: 32px;
     font-weight: 700;
   }
   .van-sidebar-item--select::before{
     top: 60%;
     height:10px;
     width: 4px;
   }
  }
}
.treeSelect::before{
  content: '';
  display:block;
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #e5e5e5;
  color: red;
  transform-origin: 0 0;
  transform: scaleY(0.5);
  left: 15px;
  z-index: 2;
}

</style>
